{template '_header'}


<style>
    .panel-default {
        border-radius: 0;
        margin-bottom: 50px;
    }
    .panel-heading {
        border: 0;
        height: 44px;
        padding: 0;
    }
    .panel-heading.transparent {
        background: transparent;
        border-bottom: 1px solid #f2f2f2;
    }
    .panel-tab-small {
        float: right;
        line-height: 44px;
        font-size: 0;
        margin-right: 30px;
        cursor: pointer;
    }
    .panel-tab-small a {
        height: inherit;;
        font-size: 12px;
        color: #333;
        padding: 0 10px;position: relative;
        display: inline-block;
    }
    .panel-tab-small a.active:before {
        position: absolute;
        content: '';
        left: 8px;
        right: 8px;
        bottom: 0;
        border-bottom: 2px solid #44abf7;
    }
    .panel-tab {
        height: 44px;
        font-size: 0;
    }
    .panel-tab a {
        height: inherit;
        padding: 0 20px;
        line-height: 44px;
        font-size: 14px;
        color: #333;
        position: relative;
        display: inline-block;
    }
    .panel-tab a.active {
        color: #44abf7;
    }
    .panel-tab a.active:before {
        content: '';
        position: absolute;
        top: -1px;
        left: -1px;
        right: 0;
        border-top: 2px solid #44abf7;
        z-index: 1;
    }
    .panel-tab a.active:after {
        content: '';
        position: absolute;
        top: 0;
        left: -1px;
        right: 0;
        bottom: 0;
        border-left: 1px solid #f2f2f2;
        border-right: 1px solid #f2f2f2;
        border-bottom: 1px solid #fff;
    }

    .panel .panel-row {
        width: 100%;
        padding: 12px;
        border-bottom: 1px solid #e7eaec;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }
    .panel .panel-row.noborder {
        border: 0;
    }
    .panel .panel-col {
        width: 100%;
        padding: 9px 0;
        text-align: center;
        border-left: 1px solid #e7eaec;
    }
    .panel .panel-col:first-child,
    .panel .panel-col.noborder {
        border: 0;
    }
    .panel .panel-col p {
        font-size: 20px;
        color: #333;
    }
    .panel .panel-col p.title {
        font-size: 14px;
    }
    .panel .panel-col p.text-danger {
        color: #ec6060;
    }
    .panel .panel-col p.text-warning {
        color: #ffc000;
    }
    .thead {
        border: 0;
        background: #f4f4f4;
    }
    .table > thead > tr > th,
    .table > tbody > tr > td {
        border: 0;
        font-weight: normal;
        color: #333;
    }
    .table > tbody > tr > td.text-warning {
        color: #ffc000;
    }

</style>

<div class="page-header"> 当前位置：<span class="text-primary">门店概述</span> </div>

<div class="page-content">
<div class="panel panel-default">
    <div class="panel-heading">
        <div class="panel-tab-small">
            <a data-type='1' class="infodays active">今日</a>
            <a data-type='7' class="infodays">七日</a>
            <a data-type='30' class="infodays">本月</a>
        </div>
    </div>
    <div class="panel-body">
        <div class="col-sm-4">
            <div class=" flex border summary">
                <div class="flex1 flex column">订单数</div>
                <div class="flex1 flex column text-primary num">{$info[1][ordernum]}</div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class=" flex border summary">
                <div class="flex1 flex column">销售额(元)</div>
                <div class="flex1 flex column text-danger num">{$info[1][salesnum]}</div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class=" flex border summary">
                <div class="flex1 flex column">核销数</div>
                <div class="flex1 flex column text-primary num">{$info[1][verifynum]}</div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class=" flex border summary">
                <div class="flex1 flex column">维权金额</div>
                <div class="flex1 flex column text-danger num">{$info[1][refundmoney]}</div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class=" flex border summary">
                <div class="flex1 flex column">维权数</div>
                <div class="flex1 flex column text-primary num">{$info[1][refundnum]}</div>
            </div>
        </div>
        <!--<div class="panel-row">-->
            <!--<div class="panel-col noborder">-->
                <!--<p class="title">订单数</p>-->
                <!--<p id="ordernum">{$info[1][ordernum]}</p>-->
            <!--</div>-->
            <!--<div class="panel-col noborder">-->
                <!--<p class="title">销售额(元)</p>-->
                <!--<p class="text-danger" id="salesnum">{$info[1][salesnum]}</p>-->
            <!--</div>-->
            <!--<div class="panel-col noborder">-->
                <!--<p class="title">核销数</p>-->
                <!--<p id="verifynum">{$info[1][verifynum]}</p>-->
            <!--</div>-->
        <!--</div>-->
        <!--<div class="panel-row noborder">-->
            <!--<div class="panel-col">-->
                <!--<p class="title">维权金额</p>-->
                <!--<p id="refundmoney">{$info[1][refundmoney]}</p>-->
            <!--</div>-->
            <!--<div class="panel-col">-->
                <!--<p class="title">维权数</p>-->
                <!--<p class="text-warning" id="refundnum">{$info[1][refundnum]}</p>-->
            <!--</div>-->
        <!--</div>-->
    </div>
</div>

<div class="panel panel-default">
    <div class="panel-heading transparent">
        <div class="panel-tab-small">
            <a data-type='1' class="listdays active">今日</a>
            <a data-type='7' class="listdays">七日</a>
            <a data-type='30'  class="listdays">本月</a>
        </div>

        <div class="panel-tab">
            <a  data-type='ordernumlist' class="showlist active">订单数排行</a>
            <a  data-type='salesnumlist'  class="showlist ">销售额排行</a>
            <a  data-type='verifynumlist' class="showlist ">核销数排行</a>
        </div>
    </div>
    <div class="panel-body ordernumlist  list">
        <table class="table">
            <thead class="thead">
            <th style="width: 20%">排序</th>
            <th>门店名称</th>
            <th style="width: 40%">订单数</th>
            </thead>
            <tbody class="tbody">
            {loop $list[1][ordernum] $key $item}
            <tr>
                <td>{php echo $key+1}</td>
                <td>{$item[storename]}</td>
                <td class="text-warning">{$item[num]}</td>
            </tr>
            {/loop}
            </tbody>
        </table>
    </div>
    <div class="panel-body salesnumlist list"  style="display: none;">
        <table class="table">
            <thead class="thead">
            <th style="width: 20%">排序</th>
            <th>门店名称</th>
            <th style="width: 40%">销售额</th>
            </thead>
            <tbody class="tbody ">
            {loop $list[1][salesnum] $key $item}
            <tr>
                <td>{php echo $key+1}</td>
                <td>{$item[storename]}</td>
                <td class="text-warning">{$item[num]}</td>
            </tr>
            {/loop}
            </tbody>
        </table>
    </div>
    <div class="panel-body verifynumlist  list" style="display: none;">
        <table class="table">
            <thead class="thead">
            <th style="width: 20%">排序</th>
            <th>门店名称</th>
            <th style="width: 40%">核销订单数</th>
            </thead>
            <tbody class="tbody">
            {loop $list[1][verifynum] $key $item}
            <tr>
                <td>{php echo $key+1}</td>
                <td>{$item[storename]}</td>
                <td class="text-warning">{$item[num]}</td>
            </tr>
            {/loop}
            </tbody>
        </table>
    </div>
</div>
</div>

<script language='javascript'>

    require(['bootstrap'],function(){
        var info = {php echo json_encode($info)};
        var list = {php echo json_encode($list)};

        $('.showlist').click(function (e) {
            $('.showlist').removeClass('active');
            $(this).addClass('active');
            $('.list').hide();
            var a = $(this).data('type');
            $('.'+a).show();
        })

        $('.listdays').click(function (e) {
            $('.listdays').removeClass('active');
            $(this).addClass('active');

            var a = $(this).data('type');

            $.each(list[a],function(index,value){

                var html="";
                $.each(list[a][index],function(index2,value2){

                    html+="<tr>";
                    html+="<td>"+index2+"</td>";
                    html+="<td>"+value2['storename']+"</td>";
                    html+="<td class='text-warning'>"+value2['num']+"</td>";
                    html+="</tr>";

                });

                $('.'+index+'list').find('tbody').html(html);
            });

        })

        $('.infodays').click(function (e) {
            $('.infodays').removeClass('active');
            $(this).addClass('active');
            var a = $(this).data('type');

            $('#ordernum').html( info[a]['ordernum']);
            $('#salesnum').html( info[a]['salesnum']);
            $('#verifynum').html( info[a]['verifynum']);
            $('#refundmoney').html( info[a]['refundmoney']);
            $('#refundnum').html( info[a]['refundnum']);

        })



    });

</script>

{template '_footer'}